import React,{Fragment, useState,useEffect} from "react";
import  { bindActionCreators } from "redux"
import {connect} from "react-redux"

import todoApp from './reducer/index'
import {
    addFn,
    shiftFn,
    unshiftFn,
    spliceFn
} from './action/index'



function App(props){
    const {name,changeState,addFn}=props
    const setStore=(type)=>{
        switch (type) {
            case 1:
                addFn({f:"ffff"})
                break;
           case 2:
                break;
            default:
                break;
        }
    }
    useEffect(()=>{
    },[changeState])
    return (<Fragment>
        
        <button className="pd_20" onClick={()=>setStore(1)}>调用addFn方法</button>
        <button className="pd_20" onClick={()=>setStore(2)}>调用spliceFn方法</button>
        <button className="pd_20" onClick={()=>setStore(3)}>调用unshiftFn方法</button>
        <button className="pd_20" onClick={()=>setStore(4)}>shiftFn</button>
        <div>{Math.random()}</div>
        {
           changeState.map((item,index)=>{
               return (
                   <div key={index}>{JSON.stringify(item)}</div>
               )
           }) 
        }
    </Fragment>)
} 
export default connect(todoApp,dispatch=>bindActionCreators({ addFn }, dispatch))(App)
/*
const initState=0
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return action.value;
    }
  }
  
let store ={
    state:{
        num:0
    },
    getters:{
        num(state){
            return state.num
        }
    },
    mutations:{

    },
    actions:{

    }
}

  // 创建 Redux store 来存放应用的状态。
  // API 是 { subscribe, dispatch, getState }。
  let store = createStore(counter);
  

function App(){
    function setStore(type){
        if(type=='DECREMENT_TYPE'){
            store.dispatch({type,value:parseInt(Math.random()*100)})
        }else{
            store.dispatch({type})
        }
        
    }
      // 可以手动订阅更新，也可以事件绑定到视图层。
    
    let [stateValue,setStateValue]=useState(0);
    const vm=this;
    store.subscribe(() =>
        setStateValue(store.getState())
    );
    return (<>
        <div className="pd_t_10"><button className="pd_20" onClick={()=>setStore("INCREMENT")}>INCREMENT 改变</button></div>
        <div className="pd_t_10"><button className="pd_20" onClick={()=>setStore("DECREMENT")}>DECREMENT 改变</button></div>
        <div className="pd_t_10"><button className="pd_20" onClick={()=>setStore("DECREMENT_TYPE")}>其他值 改变</button></div>
        <div>{stateValue}</div>
    </>)
}
 */
